
    <div class="container-fluid">
        <div class="row body_content">
            <div id='jobsetting_content'></div>
            <div id='removejob_content' class="panel panel-danger" style="display: none;">
                <div class="panel-heading jobmanage" data-i18n="jobmanage.Danger Zone"></div>
                <div class="panel-body">
                    <h4 class="jobmanage" data-i18n="jobmanage.Remove this Job"></h4></br>
                    <span class="jobmanage" data-i18n="jobmanage.Realy remove this Job? can't be restore!"></span>
                    <button class='btn btn-danger pull-right jobmanage' id='removejob' data-i18n="jobmanage.Remove Job"></button>
                </div>
            </div>
            <div id='removerunningjob_content' class="panel panel-danger" style="display: none;">
                <div class="panel-heading jobmanage" data-i18n="jobmanage.Danger Zone"></div>
                <div class="panel-body">
                    <h4 class="jobmanage" data-i18n="jobmanage.Remove this Job"></h4></br>
                    <span class="jobmanage" data-i18n="jobmanage.Stop and remove a running Job? can't be restore!"></span>
                    <button class='btn btn-danger pull-right jobmanage' id='removerunningjob' data-i18n="jobmanage.Stop and Remove Job"></button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">

    function setting_append_item (body, label, id, type, value) {
        var ele = document.createElement ("div");
        ele.setAttribute ("class", "row form-group col-md-12");
        ele.innerHTML = "<div class=\"col-lg-4\">" +
                        "<label class=\"pull-right jobmanage\" data-i18n=\"jobmanage." + label + "\"></label>" +
                        "</div>" +
                        "<div class=\"col-lg-7\">" +
                        "<input type=\"" + type + "\" class=\"form-control\" id=\"" + id + "\" value=" + value + ">" +
                        "</div>";
        body.appendChild (ele);
    }

    function setting_append_video_resolution (body, id) {
                var item = document.createElement ("div");
                item.setAttribute ("class", "row form-group col-md-12");
                item.innerHTML = "<div class=\"col-lg-4\">" +
                                 "<label class=\"pull-right jobmanage\" data-i18n=\"jobmanage.Video Resolution\"></label>" +
                                 "</div>" +
                                 "<div class=\"col-lg-7\">" +
                                 "<select class=\"form-control\" id=\"" + id + "\">" +
                                 "<option>1920x1080</option>" +
                                 "<option>1280x720</option>" +
                                 "<option>720x576</option>" +
                                 "<option>720x480</option>" +
                                 "<option>640x360</option>" +
                                 "</select>" +
                                 "</div>";
                body.appendChild (item);
    }

    function setting () {
        var name = location.href.replace (/[^\?]*\?name=(.*)/, "$1");
        $.get ("getjob/" + name, function (data) {

            if (data.result == "failure") {
                bootbox.alert ($.t ("jobmanage.Get Job Failure") + ": " + data.reason, function () {
                    window.location.replace("joblist.html");
                });
            }

            var job = data.data;

            $('#remove_job').attr ('href', "javascript:remove_job (\"" + job.name + "\")");
            $('#job_status').attr ('href', "javascript:status (\"" + job.name + "\")");

            $('#jobsetting_content').show ();

            var job_setting_element = document.createElement ("div"),
                job_setting_header = document.createElement ("div"),
                job_setting_body = document.createElement ("div");

            job_setting_element.setAttribute ("class", "panel panel-primary");
            job_setting_element.setAttribute ("id", "jobsetting");
            job_setting_header.setAttribute ("class", "panel-heading jobmanage");
            job_setting_header.setAttribute ("data-i18n", "jobmanage.Job Setting");
            job_setting_element.appendChild (job_setting_header);
            job_setting_body.setAttribute ("class", "panel-body");

            /* source */
            var source_title = document.createElement ("h3"),
                source_setting = document.createElement ("div");
            source_title.innerHTML = "Source";
            source_setting.setAttribute ("class", "well row pipeline-stat");
            if (job.type === "testsrc") {
                setting_append_video_resolution (source_setting, "sourceresolution");
            } else if (job.type === "networksrc") {
                setting_append_item (source_setting, "Source Uri", "sourceuri", "text", job.source.elements.udpsrc.property.uri);
                setting_append_item (source_setting, "Program Number", "programnumber", "number", job.source.elements.tsdemux.property["program-number"]);
            } else if (job.type === "v4l2src") {
                var width = job.source.elements.v4l2src.caps.replace(/[^\d]*(\d+),height=\d+/, "$1"),
                    height = job.source.elements.v4l2src.caps.replace(/[^\d]*\d+,height=(\d+)/, "$1");
                setting_append_item (source_setting, "Video Capture Width", "videocapturewidth", "number", width);
                setting_append_item (source_setting, "Video Capture Height", "videocaptureheight", "number", height);
            }
            job_setting_body.appendChild (source_title);
            job_setting_body.appendChild (source_setting);

            /* encoders */
            for (var i = 0, encoder; encoder = job.encoders[i]; i++) {
                var encoder_title = document.createElement ("h3"),
                    encoder_setting = document.createElement ("div");

                encoder_title.innerHTML = "Encoder." + i;
                encoder_setting.setAttribute ("class", "well row pipeline-stat");
                setting_append_video_resolution (encoder_setting, "encoder" + i + "resolution");
                setting_append_item (encoder_setting, "Video Bitrate", "videobitrate" + i, "number", encoder.elements.x264enc.property.bitrate);
                if (encoder.udpstreaming !== undefined) {
                    setting_append_item (encoder_setting, "UDP Output", "udpoutput" + i, "text", encoder.udpstreaming);
                }
                job_setting_body.appendChild (encoder_title);
                job_setting_body.appendChild (encoder_setting);
            }

            /* m3u8? */
            if (job.m3u8streaming !== undefined) {
                var m3u8_title = document.createElement ("h3"),
                    m3u8_setting = document.createElement ("div");

                m3u8_title.innerHTML = "M3U8";
                m3u8_setting.setAttribute ("class", "well row pipeline-stat");
                setting_append_item (m3u8_setting, "Window Size", "windowsize", "number", job.m3u8streaming["window-size"]);
                setting_append_item (m3u8_setting, "Segment Duration", "segmentduration", "number", job.m3u8streaming["segment-duration"]);

                job_setting_body.appendChild (m3u8_title);
                job_setting_body.appendChild (m3u8_setting);
            }

            /* dvr? */
            if (job.dvr_duration !== undefined) {
                var dvr_title = document.createElement ("h3"),
                    dvr_setting = document.createElement ("div");

                dvr_title.innerHTML = "DVR";
                dvr_setting.setAttribute ("class", "well row pipeline-stat");
                setting_append_item (dvr_setting, "DVR Duration", "dvrduration", "number", job.dvr_duration);

                job_setting_body.appendChild (dvr_title);
                job_setting_body.appendChild (dvr_setting);
            }

            /* Save button */
            var btn = document.createElement ("button");
            btn.setAttribute ("class", "btn btn-primary pull-right jobmanage");
            btn.setAttribute ("id", "savejob");
            btn.setAttribute ("data-i18n", "jobmanage.Save Job");
            job_setting_body.appendChild (btn);
            job_setting_element.appendChild (job_setting_body);

            $("#jobsetting_content").html (job_setting_element);
            $(".jobmanage").i18n ();

            // set resolution selected as job setting
            if (job.type === "testsrc") {
                var value = job.source.elements.videotestsrc.caps.replace (/[^=]*=(\d+)[^=]*=(\d+).*/, "$1x$2");
                $("#sourceresolution").val (value);
            }
            for (var i = 0, encoder; encoder = job.encoders[i]; i++) {
                var value = encoder.elements.videoscale.caps.replace (/[^=]*=(\d+)[^=]*=(\d+).*/, "$1x$2");
                $("#encoder" + i + "resolution").val (value);
            }

            $("#savejob").unbind ("click").click (function () {
                if (job.type === "testsrc") {
                    var value = $("#sourceresolution").val ().replace (/(\d+)x(\d+)/, "video/x-raw,width=$1,height=$2,framerate=25/1");
                    job.source.elements.videotestsrc.caps = value;
                } else if (job.type === "v4l2src") {
                    var width = $("#videocapturewidth").val (),
                        height = $("#videocaptureheight").val ();
                    job.source.elements.v4l2src.caps = "video/x-raw,width=" + widht + ",height=" + height;
                } else if (job.type === "networksrc") {
                    job.source.elements.udpsrc.property.uri = $("#sourceuri").val ();
                    job.source.elements.tsdemux.property["program-number"] = parseInt ($("#programnumber").val ());
                }

                for (var i = 0; i < job.encoders.length; i++) {
                    var caps = $("#encoder" + i + "resolution").val ().replace (/(\d+)x(\d+)/, "video/x-raw,width=$1,height=$2");
                    job.encoders[i].elements.videoscale.caps = caps;
                    job.encoders[i].elements.x264enc.property.bitrate = parseInt ($("#videobitrate" + i).val ());
                    if (job.encoders[i].udpstreaming !== undefined) {
                        job.encoders[i].udpstreaming = $("#udpoutput" + i).val ();
                    }
                }

                if (job.m3u8streaming !== undefined) {
                    job.m3u8streaming["window-size"] = parseInt ($("#windowsize").val ());
                    job.m3u8streaming["segment-duration"] = parseInt ($("#segmentduration").val ());
                }

                if (job.dvr_duration !== undefined) {
                    job.dvr_duration = parseInt ($("#dvrduration").val ());
                }

                $.post ("setjob/" + job.name, JSON.stringify (job, null, 4), function (data) {
                    if (data.result == 'success') {
                        bootbox.alert ($.t ("jobmanage.Set Job Success") + ": " + job.name, function () {
                            window.location.replace("joblist.html");
                        });
                    } else {
                        bootbox.alert ($.t ("jobmanage.Set Job Failure") + ": " + data.reason);
                    }
                });
            });
        });

        $.get("/stat/gstreamill/job/" + name, function (data) {
            if (data.result === "success") {
                $('#removerunningjob').click (function () {
                    $.get ("/admin/stop/" + name, function (response) {
                        if (response.result === "failure") {
                            bootbox.alert ($.t ("jobmanage.Stop Job Failure"));
                            return;
                        }
                        $.get("rmjob/" + name, function (response) {
                            if (response.result === "success") {
                                bootbox.alert ($.t ("jobmanage.Remove Job Success") + ": " + name, function () {
                                    window.location.replace("joblist.html");
                                });
                            } else {
                                bootbox.alert ($.t ("jobmanage.Remove Job Failure") + ": " + name);
                            }
                        });
                    });
                });
                $('#removerunningjob_content').show ();
            } else {
                $('#removejob').click (function () {
                    $.get("rmjob/" + name, function (response) {
                        if (response.result === "success") {
                            bootbox.alert ($.t ("jobmanage.Remove Job Success") + ": " + name, function () {
                                window.location.replace("joblist.html");
                            });
                        } else {
                            bootbox.alert ($.t ("jobmanage.Remove Job Failure") + ": " + name);
                        }
                    });
                });
                $('#removejob_content').show ();
            }
        });
    }

    $ (document).ready (function () {
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                bootbox.alert ("Get Configure Failure: " + data.reason);
                return;
            }

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".jobmanage").i18n ();
            });

            setting ();
        });

    });

    </script>
